<template>
  <el-card class="content_card">
    <el-page-header @back="goBack" content="文章详情" />
    <ActicleHeader :articleData="state.articleData"></ActicleHeader>
    <md-editor v-model="state.articleData.content" :previewOnly="true" />
  </el-card>
</template>

<script setup lang="ts">
import MdEditor from 'md-editor-v3';
import 'md-editor-v3/lib/style.css';
import ActicleHeader from "@/components/common/ActicleHeader.vue";
import { GetArticleById } from "@/api/blogContent";
import { reactive, onMounted } from 'vue'

const state = reactive({
  articleData: {
    title: "",
    publishTime: "",
    cateName: "",
    content: "",
    articleDesc: ""
  }
})

const route = useRoute()
const router = useRouter();
onMounted(() => {
  getArticle()
})

const getArticle = async () => {
  const id = route.query.id;
  const { code, data } = await GetArticleById(id);
  if (code == 200) {
    state.articleData = data;
    changeMeta()
  }
}

const changeMeta = () => {
  const { title, articleDesc } = state.articleData;
  const handleTitle = `${title} | 小豪前端`
  useHead({
    title: handleTitle,
    meta: [
      { name: 'description', content: articleDesc },
    ]
  })
}

const goBack = () => {
  router.go(-1);
}

</script>

<style lang="less" scoped>
:deep(.mavon .hljs) {
  background: #f6f8fa;
}

.content_card {
  flex-grow: 1;
  height: auto;
  width: 66vw;
  border-radius: 15px 15px 15px 15px;
  margin-bottom: 10px;

  .v-note-wrapper {
    border: 0;
  }
}

@media screen and (max-width: 1200px) {
  .content_card {
    width: auto;
    margin: 7px;

    // :deep(.el-card__body) {
    //   padding: 10px;
    // }

    :deep(.v-note-wrapper .v-note-panel .v-note-show .v-show-content,
      .v-note-wrapper .v-note-panel .v-note-show .v-show-content-html) {
      padding: 8px 15px 15px;
    }
  }
}
</style>